<template>
  <body id="poster">
    <el-form class="login-container" label-position="left"
             :rules="rules"
             ref="loginForm"
             :model="loginForm"
             label-width="0px">
<!--        <h3 class="login_title">请登录</h3>-->
        <router-link class="login_title" to="/login">登录</router-link>
        <el-divider direction="vertical"></el-divider>
        <router-link class="login_title" to="/registered">注册</router-link>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        <el-form-item prop="username">
            <el-input type="text" v-model="loginForm.username"
                      auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" show-password
                      auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
            <el-button type="primary" style="width: 100%;background: #4e6e86;border: none" v-on:click="login('loginForm')">登录</el-button>
        </el-form-item>
    </el-form>
  </body>
</template>

<script>
import axios from "../../axios/axios";
import store from "../../store/store";
import {ElMessage} from "element-plus";
export default {
    name: 'Login',
    components: {
    },
    data () {
        return {
            loginForm: {
                username: "",
                password: ""
            },
            responseResult: [],

          rules: {
            username: [
              {
                required: true,
                message: '请输入用户名',
                trigger: 'blur',
              }
            ],
            password: [
              {
                required: true,
                message: '请输入密码',
                trigger: 'blur',
              }
            ]
          }
        }
    },
    methods: {
      login(loginForm){
        this.$refs[loginForm].validate((valid) => {
          if (valid) {
            axios.post("/user/login",this.loginForm).then(res => {
              console.log(res);
              let jwt = res.headers['authorization'];
              //jwt = "test_dev";
              store.commit('SET_TOKEN',jwt);
              this.$router.push("/");
            }).catch(error=>{
              ElMessage.error(error)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      ifHaveToken(){
        let token = localStorage.getItem("token");
        // console.log(token)
        if (token != null || token !== "" || token !== "undefined"){
          this.$router.push("/");
        }
      }
    },
  mounted() {
      // this.ifHaveToken();
  }
}
</script>

<style scoped>
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 200px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #e5e2e2;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .login_title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #041f2d;
    }
    a{
      text-decoration: none;
    }
    .router-link-exact-active{
      text-decoration: none;
      color: red;
      font-size: 20px;
    }
</style>
